// 首页的样式
.main {
	padding-bottom: 100upx;
	height: 100%;
	.hd-box {
		display: flex;
		width: 100%;
		height: 128upx;
		line-height: 180upx;
		position: fixed;
		top: 0upx;
		left: 0upx;
		// border: 1px solid blue;
		// background: #FF557D;
		background: #Fa6080;
		z-index: 2;
		
		.hd-left {
			flex: 1;
			margin-left: 30upx;
			display: flex;
			font-size: 28upx;
			color: #fff;
			.position-icon {
				width: 18upx;
				height: 26upx;
				margin-right: 10upx;
				display: block;
				@include box-column-center;
				top: 70% !important;
			}
		
			view{
				width: 170upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		
			.pulldown-icon {
				width: 18upx;
				height: 9upx;
				margin-left: 10upx;
				display: block;
				@include box-column-center;
				top: 75% !important;
			}
		}
		
		.hd-right {
			flex: 1;
			margin-right: 30upx;
			display: flex;
			justify-content: flex-end;
		
			.r-item {
				position: relative;
				// flex: 1;
				min-width: 80upx;
				max-width: 80upx;
				display: flex;
				justify-content: flex-end;
		
				.point {
					position: absolute;
					top: 54upx;
					right: -8upx;
					width: 20upx;
					height: 20upx;
					line-height: 20upx;
					background-color: #fff;
					border-radius: 50%;
					color: #ff0000;
					font-size: 14upx;
					text-align: center;
				}
		
				.message {
					width: 38upx;
					height: 48upx;
					@include box-column-center;
					top: 72% !important;
				}
		
				.collection {
					width: 48upx;
					height: 45upx;
					@include box-column-center;
					top: 72% !important;
				}
		
				.shoppingcart {
					width: 48upx;
					height: 42upx;
					@include box-column-center;
					top: 72% !important;
				}
		
				view {
					color: #fff;
					font-size: 20upx;
				}
			}
		
		}
		
	}
	
}
// 搜索部分
.in-header{
	
	height: 302upx;
	overflow: hidden;
	// margin-top: 128upx;
	.search-box {
		width: 100%;
		margin-top: 20upx;
		position: relative;
		display: flex;
		padding: 0 20upx;
		.sb-left {
			min-width: 74upx;
			max-width: 74upx;
			text-align: center;
			margin-top: -16upx;
	
			.iconfont {
				color: #fff;
			}
	
			.left-footer {
				font-size: 24upx;
				color: #fff;
			}
		}
	
		.search-input {
			font-size: 28upx;
			color: #999;
		}
	
		input {
			width: 100%;
			margin: 0 auto;
			height: 60upx;
			line-height: 60upx;
			background-color: #fff;
			border-radius: 29upx;
			text-align: center;
			color: #333;
	
		}
	
		.search {
			position: absolute;
			top: 14upx;
			right: 400upx;
			font-size: 32upx;
			color: #db4d7f;
			font-weight: 500;
		}
	}
}

// 核销弹窗部分
.popup-after {
	position: absolute;
	top: 74upx;
	left: 14upx;
	width: 112upx;
	height: 160upx;
	// background: url('/static/imgs/index/background.png') no-repeat;
	// background-size: contain;
	overflow: hidden;
	z-index: 4;

	.mt {
		margin-top: 20upx;
	}

	.line {
		height: 70upx;
		line-height: 70upx;
		color: #fff;
		font-size: 24upx;
		text-align: center;
	}

	.b {
		width: 62upx;
		height: 2upx;
		margin: 0 auto;
		background-color: #fff;
	}
}


.banner {
	width: 100%;
	height: 360upx;
	position: absolute;
	top: 120upx;
	/* #ifndef APP-PLUS */
	top: 100upx;
	/* #endif */
}

.swiper-box1 {
	width: 100%;
	height: calc(100vh - 100upx);
	// padding-bottom: 100upx;
	overflow-y: auto;
	.scroll-view{
		
		height: 100%;
		.a{
			height: 200upx;
		}
	}
}

// 轮播的
.swiper-box {
	width: 100%;
	height: 360upx;

	image {
		display: block;
		width: 710upx;
		height: 360upx;
		vertical-align: middle;
		margin: 0 auto;
		border-radius: 10upx;
	}
}

// 品牌描述
.brand {
	margin-top: 180upx;
	width: 100%;

	.brand-box {
		width: 80%;
		height: 68upx;
		margin: 0 auto;
		display: flex;

		.box-item {
			flex: 1;
			color: #ff557d;
			font-size: 24upx;
			height: 100%;
			line-height: 66upx;
			display: flex;
			image {
				display: block;
				width: 28upx;
				height: 28upx;
				margin-right: 4upx;
				@include box-column-center;
			}

		}
	}
}

// 分类列表
.sort {
	background-color: #FFFFFF;
	display: flex;
	height: 70upx;
	line-height: 70upx;
	position: relative;
	padding: 0 20upx;
	.scroll2 {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}

	.sort-item {
		flex: 1;
		font-size: 24upx;
		color: #666;
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.sort-active {

		font-size: 26upx;
		color: #333;
	}

	.sort-active::after {
		content: '';
		width: 56upx;
		height: 4upx;
		border-radius: 2upx;
		background-color: #ff557d;
		position: absolute;
		left: 50%;
		bottom: 10upx;
		transform: translateX(-50%);
	}

	.sort-more {
		color: #b4b4b4;
	}
}

// 商品内容区域
.goods-box {
	padding: 20upx;
	// padding-left: 20upx;
	// padding-right: 20upx;
	// padding-bottom: 100upx;
	// border: 1px solid #000000;
	// height: calc(100vh - 200upx);
	// height: 1000upx;
	// overflow-y: auto;
	// min-height: 1000upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 100upx;

	.goods-item {
		flex: 1;
		min-width: 346upx;
		max-width: 346upx;
		// height: 562upx;
		background-color: #fff;
		border-radius: 10upx;
		margin-top: 20upx;
		position: relative;
		
		// 左上角
		.sort1{
			position: absolute;
			left: 0upx;
			right: 0upx;
			z-index: 2;
			.miaosha{
				width: 120upx;
				height: 40upx;
				margin-top: -20upx;
			}
			.pingtuan{
				width: 175upx;
				height: 40upx;
				margin: 10upx 0 0 10upx;
			}
			.ttc{
				width: 78upx;
				height: 72upx;
				margin: 10upx 0 0 10upx;
			}
			.ershou{
				width: 70upx;
				height: 94upx;
				margin: 10upx 0 0 10upx;
			}
			.num{
				text-indent: 4upx;
				font-size: 30upx;
				line-height: 40upx;
				color: #ff003c;
				font-weight: 700;
				font-family: Din;
			}
			
		}
		
		
		.item-img {
			width: 346upx;
			height: 346upx;
			border-radius: 10upx 10upx 0 0;
		}

		.item-title {
			height: 46upx;
			line-height: 46upx;
			margin-left: 10upx;
			font-size: 30upx;
			width: 326upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-msg {
			padding: 0 10upx;
			height: 44upx;
			line-height: 44upx;

			.price-1 {
				font-family: Din;
				font-size: 24upx;
				color: #ff557d;

				.price-1-1 {
					font-size: 40upx;
				}
			}

			.price-2 {
				padding: 0 8upx;
				color: #999;
				font-size: 20upx;
				text-decoration: line-through;
			}

			.msg-3 {
				font-size: 22upx;
				color: #333333;
			}

			.msg-4 {
				float: right;
				display: block;
				width: 88upx;
				padding: 0 10upx;
				height: 46upx;
				line-height: 47upx;
				background-color: #ff557d;
				border-radius: 23upx;
				font-size: 24upx;
				color: #fff;
				text-align: center;
				// margin-top: 10upx;
			}
		}
		
		.item-msg-es{
			border-bottom: 2upx solid #eee;
			padding: 0 10upx;
			.line1{
				font-size: 18upx;
				color: #999;
				text-decoration:line-through 
			}
			.line2{
				text{
					&:nth-child(1){
						font-size: 24upx;
						color: $bg02;
					}
					&:nth-child(2){
						font-size: 24upx;
						color: $bg02;
						text{
							font-size: 40upx;
							font-family: Din;
						}
					}
				}
				.msg-4 {
					float: right;
					display: block;
					padding: 0 10upx;
					height: 34upx;
					line-height: 34upx;
					background-color: #ff557d;
					border-radius: 10upx;
					font-size: 20upx;
					color: #fff;
					text-align: center;
					margin-top: 10upx;
				}
			}
			
		}
		.item-position {
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			border-bottom: 2upx solid #eee;
			padding: 0 10upx;
			display: flex;

			.left {
				flex: 1;
				position: relative;

				.user-icon {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
				}
			}

			.right {
				flex: 1;
				display: flex;
				justify-content: flex-end;

				.person-icon {
					display: block;
					width: 11upx;
					height: 19upx;
					margin-left: 20upx;
					@include box-column-center;
				}

				.position-3 {
					font-size: 20upx;
					color: #666666;
					margin-left: 6upx;
				}
			}

			.position-1 {
				position: absolute;
				top: 2upx;
				left: 40upx;
				width: 160upx;
				font-size: 20upx;
				color: #333333;
				margin: 0 10upx;
				overflow: hidden;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}


		}

		.item-footer {
			height: 50upx;
			line-height: 50upx;
			display: flex;

			.footer-l {
				flex: 1;
				height: 50upx;
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
				}

				
			}

			.footer-r {
				flex: 1;
				font-size: 20upx;
				color: #ffaa00;
			}
		}
	}
}

